import Vue from 'vue';
import VueRouter from 'vue-router';
import App from '../App.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'App',
    redirect: '/index/Home',
    component: App,
    children: [
      {
        path: '/index',
        name: 'Index',
        component: () => import('@/views/index'),
        children: [
          {
            path: '/index/Home',
            name: 'Home',
            meta: { title: '首页' },
            component: () => import('../views/Home'),
          },
          {
            path: '/index/test',
            name: 'test',
            meta: { title: '测试' },
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import('../views/test.vue'),
          },
        ],
      },
    ],
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});
router.beforeEach((to, from, next) => {
  document.title = `todoList-${to.meta.title}`;
  next();
});
export default router;
